<!doctype html>
<!--[if lte IE 8]>
<html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="zh-CN"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="email=no"/>
    <meta name="format-detection" content="address=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-title" content="雏鹰网"/>
    <title>icon mobile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">
    
    <link rel="stylesheet" href="../assets/css/base_m.css">
    
    <script src="../vendor/jquery/jquery-2.1.4.min.js"></script>
    
    <style>
    body {
      
    }
    .form-content {
      position: relative;
      margin-bottom: 15px;
    }
    #icons {
      max-width: 1100px;
      margin: 0 auto;
    }
    #icons span {
      display: inline-block;
      margin: 7px 7px;
      font-size: 18px;
      width: 220px;
      vertical-align: top;
    }
    </style>
    
  </head>
  <body class="">
  
    
    <h1>字体图标使用（example： class="if  icon-home"）</h1>
    <form action="" class="form form-login" novalidate="novalidate" id="loginform" method="post" data-success-url="http://user.undm.cn/member/register_success.html">

      
       
        <div id="result">
          <div>
            <span class="if icon-angle-top-circle-o">icon-angle-top-circle-o</span>
            <span class="if icon-pdf-win8">icon-pdf-win8</span>
            <span class="if icon-star-o">icon-star-o</span>
            <span class="if icon-star">icon-star</span>
            <span class="if icon-paper">icon-paper</span>
            <span class="if icon-home">icon-home</span>
            <span class="if icon-comment-dot-circle">icon-comment-dot-circle</span>
            <span class="if icon-heart">icon-heart</span>
          </div>

        </div>


        <div id="icons">
          
        </div>
        
        


    </form>
  
    <script>
    $(function(){

      var aa='icon-diamond-blink,.icon-pad-paper,.icon-img-square,.icon-dot-circle,.icon-shanchu,.icon-satellite,.icon-user-3-thin,.icon-tag,.icon-pad-inspect,.icon-gear-fill,.icon-vote,.icon-rmb-alarm,.icon-weixin-fill,.icon-check-guard,.icon-compass,.icon-plus,.icon-mobile,.icon-weibo,.icon-paper-plane,.icon-take-photo,.icon-weixin,.icon-times-circle,.icon-check-circle,.icon-angle-left,.icon-envelope-open-fill,.icon-angle-up-circle,.icon-rmb-loop,.icon-img-2,.icon-user-3,.icon-medal,.icon-reply-fill,.icon-chat-circle-2,.icon-download-fill,.icon-map-marker,.icon-weixin-circle-fill,.icon-face-smile,.icon-arrow-up,.icon-envelope-fill,.icon-line-4-paper,.icon-rmb-in,.icon-wallet,.icon-share-change,.icon-warning-circle,.icon-rmb-out,.icon-pad-tripod,.icon-qq,.icon-precise,.icon-diamond,.icon-plus-circle,.icon-qq-fill,.icon-pingguo,.icon-trash,.icon-guard,.icon-weibo-circle-fill,.icon-shibai,.icon-wallet-fat,.icon-square,.icon-rocket-lean,.icon-arrow-up-ceil,.icon-share,.icon-times,.icon-weixin-square-fill,.icon-face-unhappy,.icon-angle-right-circle,.icon-weibo-square-fill,.icon-angle-down,.icon-pencil-paper,.icon-check-circle-fill,.icon-lock,.icon-line-3-paper-fill,.icon-gold-stack-2,.icon-rmb-line-3-pad-fill,.icon-unpaid,.icon-chat-dot-3-circle-2,.icon-sign-agreement,.icon-user-circle-fat,.icon-rmb-card-2-fill,.icon-angel-down-circle,.icon-line-4-pad,.icon-circle,.icon-user-split,.icon-check-square,.icon-building-2,.icon-news,.icon-gold-stack-3-fill,.icon-history,.icon-camera,.icon-msg-dot-3-square,.icon-man-3-fill,.icon-times-circle-fill,.icon-face-upset,.icon-plus-square,.icon-eye,.icon-growth-circle,.icon-user-profile,.icon-thumb-up,.icon-filter,.icon-arrow-down,.icon-rmb-bag,.icon-eye-fill,.icon-polyline-circle,.icon-check,.icon-triangle-down-round-fill,.icon-eye-closed,.icon-map-marker-split,.icon-rmb-circle,.icon-eye-forbid-fill,.icon-pencil-pad-hard,.icon-triangle-right-fill,.icon-iconanzhuo,.icon-search,.icon-check-circle-split,.icon-confirm-agreement,.icon-envelope,.icon-book-4-fill,.icon-speaker,.icon-angle-right,.icon-angle-up-2-square,.icon-gear,.icon-eye-close,.icon-line-2-paper,.icon-pencil-pad,.icon-user-fill,.icon-user-circle,.icon-dollar-square-2,.icon-dollar-square-2-fill,.icon-news-fill,.icon-bell,.icon-msg-dot-3-square-fill';

      var fn = function(str){
        var arr = str.split(',');
        //console.log(arr)
        for(var i = 0;i<arr.length;i++){
          var iconClass = arr[i];
          _iconClass = iconClass.replace('.','');
          $span = $('<span></span>').addClass('if').addClass(_iconClass).html('<div>'+iconClass+'</div>');
          $('#icons').append($span)
        }
      };

      fn(aa);

      $('#submit').on('click',function(){
        var content = $('#note').val();

        //var content = content.replace("\r\n",",");
        var content = content.replace(/(\:before\{\S+\})/g,",");
        content=content.replace(/\n/g,"");
        //console.log(content);
        $('#reuslt').html(content);

        var Things = content.split(',');


        for (var i = Things.length - 1; i >= 0; i--) {
          var iconClass = Things[i];
          if(iconClass && iconClass.length>0){
            $('#icons').append('<div class="if '+ iconClass +'">'+'<div>'+iconClass+'</div>'+'</div>')
          }
        }




      });

    });
    </script>
    


    
  </body>
</html>
